
<template>
    <div>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>美多商城-注册</title>
	
</head>
<body>
	<div class="register_con">
		<div class="l_con fl">
			<a href="index.html" class="reg_logo"><img src="../../static/images/logo.png"></a>
			<div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
			<div class="reg_banner"></div>
		</div>

		<div class="r_con fr">
			<div class="reg_title clearfix">
				<h1>用户注册</h1>
				<a href="login.html">登录</a>
			</div>
			<div class="reg_form clearfix">
				<form method="post" class="register_form">
				<ul>
					<li>
						<label>用户名:</label>
						<input type="text" name="user_name" id="user_name" v-model="username" @blur="checkusername">
						<span class="error_tip" v-show="userror">请输入5-20个字符的用户</span>
					</li>					
					<li>
						<label>密码:</label>
						<input type="password" name="pwd" id="pwd" v-model="password1" @blur="checkpassword">
						<span class="error_tip" v-show="paerror">请输入8-20位的密码</span>
					</li>
					<li>
						<label>确认密码:</label>
						<input type="password" name="cpwd" id="cpwd" v-model="password2" @blur='checkpassword_ps'>
						<span class="error_tip" v-show="paerror_pa">两次输入的密码不一致</span>
					</li>
					<li>
						<label>手机号:</label>
						<input type="text" name="phone" id="phone" v-model="mobile" @blur='checkmobile'>
						<span class="error_tip" v-show="moerror">请输入正确的手机号码</span>
					</li>
					<li>
                        <label>图形验证码:</label>
                        <input type="text" name="pic_code" id="pic_code" class="msg_input" v-model="image" @blur='checkimage'>
                     <div @click="getimagecode">
                            <img :src="imageurl" alt="图形验证码" class="pic_code"  >
                     </div>
                        <span class="error_tip" v-show="imerror">请填写图形验证码</span>
                    </li>
					<li>
						<label>短信验证码:</label>
						<input type="text" name="msg_code" id="msg_code" class="msg_input" @blur="checkcode" v-model="coden">
						<a href="javascript:;" class="get_msg_code" @click="getmsgcode">获取短信验证码</a>
						<span class="error_tip" v-show="coerror">请填写短信验证码</span>
					</li>
					<li class="agreement">
						<input type="checkbox" name="allow" id="allow" checked="checked" v-model="agree" @blur='checkagree'>
						<label>同意”美多商城用户使用协议“</label>
						<span class="error_tip" v-show="agerror">请勾选用户协议</span>
					</li>
					<li class="reg_sub">
						<input type="submit" value="注 册"  @click.prevent="add">
					</li>
				</ul>				
				</form>
			</div>

		</div>

	</div>

	<div class="footer no-mp">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
</body>
</html>
    </div>
</template>

<script>
import '../../static/css/reset.css'
import '../../static/css/main.css'
import axios from 'axios'
import {v4 as uuid} from 'uuid'

export default {
    
    data() {
        return {
            username:'',
            password1:'',
            password2:'',
            mobile:'',
            userror:true,
            paerror:true,
            paerror_pa:true,
            moerror:true,
            coden:'',
            coerror:true,
            image:'',
            imerror:true,
            agree:'',
            agerror:true,


            imageurl:'',
            imageuuid:'',

            validation:'',
        }
    },
    methods: {
        //检查用户名
        checkusername(){
            let username=this.username
            //5-20个字符的用户
            let ureg = /\w{5,20}$/
            if(username== undefined || username=='' || !ureg.test(username)){
                //请输入5-20个字符
                this.userror=true
            }else{
                this.userror=false
            }
            //用户名是否重复
        },
        checkpassword(){
            let password=this.password1
            let res=/\w{8,20}$/
            if(password==undefined || password=='' || !res.test(password)){
                this.paerror=true
            }else{
                this.paerror=false
            }
        },
        checkpassword_ps(){
            let password1=this.password1
            let password2=this.password2
            if(password1==password2){
                this.paerror_pa=false
            }else{
                this.paerror_pa=true
            }
        },                                                                                                                                                                                           
        checkmobile(){
            let mobile=this.mobile
            let br=/^1[34568]\d{9}$/
            if(mobile=='' || mobile==undefined  ||  !br.test(mobile)){
                this.moerror=true
            }else{
                this.moerror=false
            }
        },

        add(){
            if(this.validation==this.coden){
            let arr=new FormData()
            arr.append('username',this.username)
            arr.append('password1',this.password1)
            arr.append('password2',this.password2)
            arr.append('mobile',this.mobile)
            arr.append('agree',this.agree)
            this.axios({
                url:'/users/register/',
                method: 'post',
                data:arr
            }).then(res=>{
                    console.log(res.data)
                    if(res.data.code==10010){
                        alert('账户不符合标准')
                        return false
                    }
                    if(res.data.code==10011){
                        alert('用户已结存在不能注册')
                        return false
                    }
                    if(res.data.code==10012){
                        alert('密码不符合标准')
                        return false
                    }
                    if(res.data.code==10013){
                        alert('两次密码不一致')
                        return false
                    }
                    if(res.data.code==10014){
                        alert('手机号不符合标准')
                        return false
                    }
                    if(res.data.code==10015){
                        alert('手机号已经存在不能注册')
                        return false
                    }
                    if(res.data.code==10016){
                        alert('请选择打勾')
                        return false
                    }
                    if(res.data.code==200){
                        console.log(res.data)
                        var userid = res.data.userid
                        var username = res.data.username
                        // localStorage.setItem('userid',userid)
                        // localStorage.setItem('username',username)                        
                    }
                    localStorage.setItem('userid',1)
                    localStorage.setItem('username','xiaoming')
                })        
            }    
        },

        getimagecode(){
           this.imageuuid=uuid()
            this.imageurl='http://127.0.0.1:8000/users/image_code/?uuid='+this.imageuuid
        },

            //获取短信验证码
        getmsgcode(){
          //获取用户输入的图片验证码
			var imagecode = this.image
            var mobile=this.mobile
            console.log(imagecode,this.imageuuid,mobile)
			this.axios.get('/users/send_sms/?imagecode='+imagecode+'&mobile='+mobile+'&uuid='+this.imageuuid).then(res=>{
				console.log(res.data)
                this.validation=res.data.msg
                console.log(this.validation)
			})
        },
        checkagree(){
            let checkagree=this.agree
            if(checkagree != ''){
                this.agerror=false
            }
        },
        checkimage(){
            let imerror=this.image
            if(imerror != ''){
                this.imerror=false
            }
        },
        checkcode(){
            let coerror=this.coden
            if(coerror != ''){
                this.coerror=false
            }
        }
    },
    created() {
            this.getimagecode()
    }
}
</script>

<style scoped>

</style>
